<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简单上传测试</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
</head>
<body>
    <div class="container" style="padding-top: 20px;">
        <h1>最简上传测试页面</h1>
        <p>这个页面用于排除插件问题，直接测试后端的 /file/upload 接口。</p>
        
        <div class="form-group">
            <label for="myFile">选择文件:</label>
            <input type="file" id="myFile" class="form-control">
        </div>
        
        <button id="uploadButton" class="btn btn-success">上传</button>
        <a href="/static/view/home.html" class="btn btn-primary">返回主页</a>
        
        <div id="result" style="margin-top: 20px; font-weight: bold;"></div>
    </div>

<script>
$(document).ready(function() {
    // 1. 检查 Token
    var token = localStorage.getItem("token");
    if (!token) {
        $("#result").text("错误：找不到 Token，请先登录。").css("color", "red");
        return;
    }

    // 2. 绑定点击事件
    $("#uploadButton").on("click", function() {
        var fileInput = $('#myFile')[0];
        if (fileInput.files.length === 0) {
            alert("请先选择一个文件！");
            return;
        }

        var file = fileInput.files[0];
        var formData = new FormData();
        formData.append('file', file); // 'file' 必须与后端期望的 key 一致

        $("#result").text("正在上传...").css("color", "blue");

        // 3. 发送最基础的、带授权头的 AJAX 请求
        $.ajax({
            url: '/file/upload',
            type: 'POST',
            data: formData,
            processData: false,  // 必须是 false，jQuery 才不会去处理 FormData 对象
            contentType: false,  // 必须是 false，浏览器会自动设置正确的 Content-Type 和 boundary
            beforeSend: function(xhr) {
                // 在这里设置 Authorization 头
                xhr.setRequestHeader('Authorization', 'Bearer ' + token);
            },
            success: function(response) {
                $("#result").text("上传成功！响应: " + JSON.stringify(response)).css("color", "green");
            },
            error: function(jqXHR) {
                var errorMsg = jqXHR.responseJSON ? JSON.stringify(jqXHR.responseJSON) : jqXHR.responseText;
                $("#result").text("上传失败！错误: " + errorMsg).css("color", "red");
            }
        });
    });
});
</script>

</body>
</html>
